
<template>
<div>
  <div  class="btn_img" @click="openDialog()">
      <img :src="imageUrl" />
  </div>
      <!-- 对话框 append-to-body属性可以把对话框出现在页面前端
      :visible.sync="dialogVisible" 配合data中的属性,决定对话框
      是否正常显示-->
  <el-dialog
    append-to-body
    title="封面" :visible.sync="dialogVisible">
    <!-- 这里绑定了activename这个属性,是一个双向绑定可以检测数值的变化 -->
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="素材库" name="images">
      <!-- 素材库中的内容 -->
        <div style="padding-bottom: 20px">
        <el-radio-group v-model="isCollected" size="small"  @change="hToggle">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
      </div>
    <!-- /素材列表 -->
      <el-row :gutter="10" style="margin-top: 20px">
        <!-- 这里面是素材图片的列表,规定高度height以后,可以自适应 -->
        <el-col
          :span="4"
          :class="{selected: image.url===selectedImageUrl}"
          v-for="image in images"
          :key="image.id"
          class="img_item" >
          <!-- 如果不支持click事件,就添加一个native属性 -->
          <el-image
           @click.native="hSelectImage(image.url)"
            style="height: 100px;"
            :src="image.url"
            fit="cover"
          ></el-image>
        </el-col>
      </el-row>
    <!-- /素材列表 -->
    <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        @current-change="hPageChange"
        :total="total_count">
      </el-pagination>
    </el-tab-pane>
    <!-- 上传选项卡中的内容 -->
    <el-tab-pane label="上传" name="upload">
      <!-- 上传选择中的内容 -->
            <el-upload
              class="avatar-uploader"
              action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
              :headers="headers"
              name="image"
              :show-file-list="false"
              :on-success="hSuccess"
              :before-upload="beforeAvatarUpload">
                <!-- 当上传成功之后，imageUrl就会有值，此时做预览
                  给img设置了src后，显示图片内容的过程是异步的 ---- 并不是设了src后就可以立即看到图片的
                  问：你怎么知道图片已经完成了加载？
                -->
                <el-image v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar" @load="hLoadUploadImage" />
                <!-- 没有上传之前，这里是一个大大的 + -->
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
    </el-tab-pane>
  </el-tabs>
          <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="hConfirm">确 定</el-button>
        </span>
  </el-dialog>
</div>
</template>

<script>
import defaultImage from '../assets/default.png'
export default {
  name: 'cover',
  // 为了迎合home中的v-model,从父组件向子组件传值
  props: ['value'],
  data () {
    return {
      imageUrl: this.value || defaultImage,
      dialogVisible: false,
      activeName: 'images', // 表示目前选中了哪一个
      isCollected: false, // 判断是否收藏
      images: [],
      headers: {
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      },
      selectedImageUrl: '', // 记录当前用户选中的是哪一张图片（url
      uploadImageUrl: '', // 上传成功之后的预览图片地址
      total_count: 0,
      page: 1 // 当前显示的页码
    }
  },
  methods: {
    // 控制对话框的显示和关闭
    openDialog () {
      this.dialogVisible = true
      // 对话框出来的时候发送请求
      this.loadImages()
      this.selectedImageUrl = this.uploadImageUrl = ''
    },
    // 创建参数
    creatParams () {
      const paramsObj = {}
      paramsObj.page = this.page
      paramsObj.per_page = 10
      paramsObj.collect = this.isCollected
      return paramsObj
    },
    // 发送ajax请求
    async loadImages () {
      const paramsObj = this.creatParams()
      // 有可能会出错,就把他们都放到try里面去
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/user/images',
          params: paramsObj
        })
        this.images = res.data.data.results
        this.total_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
        this.images = []
        this.total_count = 0
      }
    },
    // 上方导航栏的切换事件
    handleClick () {

    },
    // 点击切换收藏和全部
    hToggle () {
      // 把当前的页码变成第一页,因为他们都相当于第一次发请求
      // 收藏页面也是只显示自己所能呈现的,所以也是从第一页开始显示
      this.page = 1
      // 重新发送请求
      this.loadImages()
    },
    // 分页,点击页面按钮切换
    hPageChange (curPage) {
      this.page = curPage
      this.loadImages()
    },
    // 点击只后选中一张图片
    hSelectImage (url) {
      this.selectedImageUrl = url
    },
    // 加载成功
    hSuccess (res, file) {
      this.uploadImageUrl = res.data.url
      this.$message.success('上传成功')
    },
    // 加载前判断图片的格式是否符合标准
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 加载后
    hLoadUploadImage () {

    },
    // 选择好图片后,点击确定,上传图片
    hConfirm () {
      // v-model 双向绑定了data中的active这个属性 这里name这个属性跟model是呼应的
      // active等于谁的name值,那个子组件就会优先显示
      if (this.activeName === 'images' && !this.selectedImageUrl) {
        this.$message.error('你必须在图表列中的选中一项')
        return
      }

      if (this.activeName === 'upload' && !this.uploadImageUrl) {
        this.$message.error('你必须先上传一张图')
        return
      }

      this.imageUrl = this.activeName === 'images' ? this.selectedImageUrl : this.uploadImageUrl
      // console.log(this.imageUrl)
      // 关闭这个弹层

      this.dialogVisible = false

      this.$emit('input', this.imageUrl)
    }
  }
}
</script>

<style scoped lang='less'>
// 图片按钮
.btn_img {
  cursor: pointer;
  width: 150px;
  height: 150px;
  border: 1px dashed #ddd;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.avatar-uploader {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #ddd;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
  .selected::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3) url(../assets/selected.png) no-repeat center / 50px 50px;
  }
// 素材列表

  .img_item{
   position: relative;
     /deep/ img {
      cursor: pointer
    }
  }
</style>
